{% extends 'home/public/base.html' %}

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/home/public/css/list.css">
<link rel="stylesheet" type="text/css" href="/static/home/public/css/list-app.css">
{% endblock %}


{% block con %}
<div class="mainlist app-list">
  <div class="container">
    <!-- 面包屑 导航 -->
    <div class="ml-nav hidden-xs hidden-sm">
          <ol class="breadcrumb">
            <li><a href="{% url 'index' %}">首页</a></li>
            <li><a href="#">全部商品</a></li>
       
            <li><a href="{% url 'list' data.id %}">{{ data.name }}</a></li>
            
          </ol>
    </div>
    <!-- 面包屑 导航 E-->
    <!-- 分类列表 -->
  	<div class="selector hidden-xs hidden-sm">
  		<div class="sl-category">
  			<div class="sl-line-wrap clearfix">
  			  <div class="mod-key">分类：</div>
  			  <div class="mod-value">
  			    <div class="mod-value-list">
  			      <ul>
  			        <li class="">
  			          <a href="{% url 'list' data.id %}" title="全部">全部</a>
  			        </li>
                {% for v in data.sub %}
                  {% if v.id == data.obj.id %} 
                  <li class="">
                    <a href="{% url 'list' v.id %}" title="{{ v.name }}" style="color:#00c3f5;">{{ v.name }}</a>
                  </li>
                  {% else %}
                  <li class="">
                    <a href="{% url 'list' v.id %}" title="{{ v.name }}">{{ v.name }}</a>
                  </li>
                  {% endif %}
                {% endfor %}
  			      </ul>
  			    </div>
  			  </div>
  			</div>
  
  		</div>
  	</div>
    <!-- 分类列表 E -->

    <!-- 分类导航 -->
<!--     <div class="filter clearfix hidden-xs hidden-sm" style="display:block">
      <div class="filter-order">
        <a class="active" data-tag="0" data-mtype="store_list_sx_1" href="javascript:void(0);">
            推荐
        </a>
        <a data-tag="1" data-mtype="store_list_sx_2" href="javascript:void(0);">
            新品
        </a>
        <a data-tag="2" data-mtype="store_list_sx_3" href="javascript:void(0);">
            价格<i class="icon-arrow-down"></i>
        </a>
      </div>
      <div class="filter-condition">
        <label class="bs-checkbox" data-mtype="store_list_sx_xz">
            <i></i>仅显示有货商品
        </label>
      </div>
    </div> -->

    <!-- 分类导航 E -->

    <!-- 商品列表 -->
    <div class="goods-list">
      <div class="row">
        {% for v in data.goods %}
        <div class="col-md-3 col-sm-6 col-xs-6">
          <div class="gl-item">
            <div class="gl-item-wrap" >
              <!-- Tab panes -->
              <br><br>
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active mod-pic" id="list-p1">
                  <a href="{% url 'info' v.id %}">
                    <img class="lazy j-modProduct" src="{{ v.pic }}" style="width:220px;height:220px;">
                  </a>
                </div>

              </div>

              <div class="slide-btn j-modBtns" style="display: none;">
                  <span class="prev iconfont disabled"></span>
                  <span class="next iconfont"></span>
              </div>

              <h2>{{ v.title }}</h2>

              <dd class="mod-price">
                  <span>￥</span>
                  <span class="vm-price">{{ v.price }}</span>
                  <span class="vm-start">起</span>
              </dd>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>

    </div>
    <!-- 商品列表 -->
    <!-- 推荐商品 -->
<!--     <div class="recommend  hidden-xs hidden-sm">
      <div class="recommend-hd">
          <h2 class="mod-title">为您推荐</h2>
      </div>
     <iv class="recommend-slider">
        <div class="flex-viewport" style="overflow: hidden; position: relative;">
          <ul class="recommend-slider-wrap" style="width: 1000%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
            <li class="rs-item" style="width: 245.6px; margin-right: 5px; float: left; display: block;">
              <a class="rs-item-wrap" title="魅蓝 Note5" href="#" target="_blank">
                <div class="mod-pic">
                  <img src="/static/home/public/img/list81.jpg" style="display: inline;" width="180" height="180">
                </div>
                <div class="mod-desc">
                  <h4 class="vm-title">魅蓝 Note5 </h4>
                  <h6 class="vm-subtitle" title="6期免息  16G直降100元">6期免息  16G直降100元</h6>
                  <p class="vm-price">
                      <span>¥</span><span class="vm-price-text">899</span>
                  </p>
                </div>
                <span class="mod-sign" style="background-color: #f0415f;">特惠</span>
              </a>
            </li>
            <li class="rs-item" style="width: 245.6px; margin-right: 5px; float: left; display: block;">
              <a class="rs-item-wrap" title="魅蓝 5s" href="#" target="_blank">
                <div class="mod-pic">
                        <img src="/static/home/public/img/list82.jpg" style="display: inline;" width="180" height="180">
                </div>
                <div class="mod-desc">
                    <h4 class="vm-title">魅蓝 5s </h4>
                    <h6 class="vm-subtitle" title="32G版限量赠壳膜">32G版限量赠壳膜</h6>
                    <p class="vm-price">
                        <span>¥</span><span class="vm-price-text">999</span>
                    </p>
                </div>
              </a>
            </li>
            <li class="rs-item" style="width: 245.6px; margin-right: 5px; float: left; display: block;">
              <a class="rs-item-wrap" title="魅族 MX6" href="#" target="_blank">
                <div class="mod-pic">
                        <img src="/static/home/public/img/list83.jpg" style="display: inline;" width="180" height="180">
                    </div>
                <div class="mod-desc">
                    <h4 class="vm-title">魅族 MX6 </h4>
                    <h6 class="vm-subtitle" title="全金属 拍照旗舰">全金属 拍照旗舰</h6>
                    <p class="vm-price">
                        <span>¥</span><span class="vm-price-text">1599</span>
                    </p>
                </div>
              </a>
            </li>
            <li class="rs-item" style="width: 245.6px; margin-right: 5px; float: left; display: block;">
              <a class="rs-item-wrap" title="魅蓝 Max" href="#" target="_blank">
                <div class="mod-pic">
                  <img src="/static/home/public/img/list84.jpg" style="display: inline;" width="180" height="180">
                </div>
                <div class="mod-desc">
                  <h4 class="vm-title">魅蓝 Max </h4>
                  <h6 class="vm-subtitle" title="大屏长续航 享3期免息">大屏长续航 享3期免息</h6>
                  <p class="vm-price">
                      <span>¥</span><span class="vm-price-text">1699</span>
                  </p>
                </div>
              </a>
            </li>
            <li class="rs-item" style="width: 245.6px; margin-right: 5px; float: left; display: block;">
              <a class="rs-item-wrap" title="魅蓝 E2" href="#" target="_blank">
                <div class="mod-pic">
                  <img src="/static/home/public/img/list85.jpg" style="display: inline;" width="180" height="180">
                </div>
                <div class="mod-desc">
                    <h4 class="vm-title">魅蓝 E2 </h4>
                    <h6 class="vm-subtitle" title="三色现货 购机享3期免息">三色现货 购机享3期免息</h6>
                    <p class="vm-price">
                        <span>¥</span><span class="vm-price-text">1299</span>
                    </p>
                </div>
              </a>
            </li>
          </ul>
        </div>
    </div> -->
  </div>
    <!-- 推荐商品 E -->

  </div>
</div>
{% endblock %}